import React from "react"
import { fetchItemList } from "@/api/admin/dict"
import PropTypes from "prop-types"
import { MyTable, config, TextFormItem, NumberFormItem } from "@/components"
import { Space, Button, Modal, Form, Row, message } from "antd"
import { EditOutlined, DeleteOutlined } from "@ant-design/icons"
import styles from "./index.module.css"
import { addItemObj, putItemObj, delItemObj } from "@/api/admin/dict"

export default class DictItemContainer extends React.Component {
  itemColumns = [
    {
      title: "序号",
      render: (text, record, index) => <span>{index + 1}</span>,
    },
    { title: "类型", dataIndex: "type" },
    { title: "数据值", dataIndex: "value" },
    { title: "标签名", dataIndex: "label" },
    { title: "描述", dataIndex: "description" },
    { title: "排序", dataIndex: "sort" },
    { title: "备注信息", dataIndex: "remarks" },
    {
      title: "操作",
      render: (text, record) => (
        <Space>
          <Button
            icon={<EditOutlined />}
            type="text"
            onClick={() =>
              this.setState({
                dictItemVisible: true,
                modalFlag: false,
                dictItem: record,
              })
            }
          >
            编辑
          </Button>
          <Button
            icon={<DeleteOutlined />}
            type="text"
            onClick={() => this.delDictItem(record.id)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ]
  state = {
    tableItemData: [],
    dictItemVisible: false,
    modalFlag: true,
    dictItem: {
      type: undefined,
      value: undefined,
      label: undefined,
      description: undefined,
      sort: undefined,
      remarks: undefined,
    },
  }
  static propTypes = {
    dictId: PropTypes.number.isRequired,
    type: PropTypes.string.isRequired,
  }
  componentDidMount() {
    this.getDictItem()
  }
  getDictItem() {
    const { dictId } = this.props
    fetchItemList({
      current: 1,
      size: 10,
      dictId,
    }).then((res) => {
      let tmp = this.state.dictItem
      tmp["type"] = (res.data.data.records[0] || this.props).type
      this.setState({
        tableItemData: res.data.data,
        dictItem: tmp,
      })
    })
  }
  addDictItem() {
    const { modalFlag } = this.state
    this.form.validateFields().then((values) => {
      const func = modalFlag ? addItemObj : putItemObj
      func({
        ...values,
        dictId: this.props.dictId,
      }).then(() => {
        this.getDictItem()
        this.setState({
          dictItemVisible: false,
        })
      })
    })
  }
  // 删除字典项
  delDictItem(id) {
    Modal.confirm({
      title: "确定删除该条数据吗？",
      centered: true,
      onOk() {
        delItemObj(id).then(() => {
          message.success("删除成功！")
        })
      },
    })
  }
  render() {
    const { tableItemData, dictItemVisible, modalFlag, dictItem } = this.state
    const { type, value, label, description, sort, remarks } = dictItem
    return (
      <div>
        <MyTable
          bordered
          columns={this.itemColumns}
          dataSource={tableItemData}
          onChange={() => this.getDictItem()}
          handleAdd={() => {
            this.setState({
              dictItemVisible: true,
              modalFlag: true,
              dictItem: {
                type: this.props.type || "",
                value: undefined,
                label: undefined,
                description: undefined,
                sort: undefined,
                remarks: undefined,
              },
            })
          }}
        />
        {dictItemVisible && (
          <Modal
            title={modalFlag ? "新增" : "编辑"}
            visible={dictItemVisible}
            width={1000}
            onOk={this.addDictItem.bind(this)}
            onCancel={() => {
              this.setState({ dictItemVisible: false })
            }}
            okText="保存"
            cancelText="取消"
          >
            <Form
              {...config.getFormLayout()}
              ref={(ref) => {
                this.form = ref
              }}
              className={styles.formBox}
              initialValues={dictItem}
            >
              <Row>
                <TextFormItem
                  label="类型"
                  value={{ type }}
                  editing={false}
                  required={false}
                />
                <TextFormItem label="数据值" value={{ value }} />
              </Row>
              <Row>
                <TextFormItem label="标签名" value={{ label }} />
                <TextFormItem label="描述" value={{ description }} />
              </Row>
              <Row>
                <NumberFormItem label="排序" value={{ sort }} />
                <TextFormItem
                  label="备注"
                  value={{ remarks }}
                  required={false}
                />
              </Row>
            </Form>
          </Modal>
        )}
      </div>
    )
  }
}
